<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-tabs</title>
<link rel="stylesheet" type="text/css"
	href="./jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="./jquery-easyui/themes/icon.css">
<script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="./jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="./jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="./datagrid.js"></script>
<script type="text/javascript">
	function ageFormatter(value, rowData, index) {
		if (value < 30) {
			return '<font color="red" ><b><u>' + value + '</u></b></font>';
		} else {
			return value;

		}

	}
	function rowStyle(index,rowData){
		if(rowData.age>30){
			return  'background-color:#6293BB;color:#fff;';
		}	
		
	}
	
</script>


</head>
<body>
	<h1>EasyUI</h1>
	
	<div  style="width:700px;height:300px">

		<table class="easyui-datagrid" style="width:500px;height:300px"
			singleSelect=true 
			toolbar="#tb"
			pagination="true" 
			rownumbers="true"
			pageList="[3,5,7,9,11]"
			pageSize="3"
			data-options="
				fit:true,
				fitColumns:true,
				rowStyler:rowStyle
			"
			>
			<thead>
				<tr>
					<th data-options="field:'ck',checkbox:true" width="100"></th>
					<th field="name" width="100" halign="center">name</th>
					<th field="age" width="100" formatter="ageFormatter">age</th>
					<th field="score" width="100" align="center">score</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td  width="100"></td>
					<td>Tom1</td>
					<td>24</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom2</td>
					<td>28</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom3</td>
					<td>46</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom4</td>
					<td>14</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom5</td>
					<td>78</td>
					<td>90</td>
				</tr>
			</tbody>

		</table>
	
	</div>
		<div id="tb">
			<div>
				<a class="easyui-linkbutton" iconCls="icon-add" plain=true>增加</a>
			</div>
			<div>
				关键字:<input type="text"> <a class="easyui-linkbutton">搜索</a>
			</div>
		</div>


		<table class="easyui-datagrid" style="width: 500px; height: 300px"
			rowStyler="rowStyle"
			fitColumns=true
			>
			<thead>
				<tr>
					<th data-options="field:'ck',checkbox:true" width="100"></th>
					<th field="name" width="100" halign="center">name</th>
					<th field="age" width="100" formatter="ageFormatter">age</th>
					<th field="score" width="100">score</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td  width="100"></td>
					<td>Tom1</td>
					<td>24</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom2</td>
					<td>28</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom3</td>
					<td>46</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom4</td>
					<td>14</td>
					<td>90</td>
				</tr>
				<tr>
					<td width="100"></td>
					<td>Tom5</td>
					<td>78</td>
					<td>90</td>
				</tr>
			</tbody>

		</table>
	
</body>
</html>